<template>
  <div>
    <p>
      <el-button type="warning" @click="addr">批量取消</el-button>
      <el-button type="danger" @click="deleteById">批量删除</el-button>
      <el-button type="success" @click="clear">清理无效订单</el-button>
      <el-divider></el-divider>
      <template>
        <el-select v-model="selectUser" placeholder="请选择">
          <el-option
            v-for="item in User"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </template>
      <el-button
          icon="el-icon-search"
          type="info"
          circle
          @click="getList"
        ></el-button>
    </p>
    <el-table :data="orders" style="width: 100%">
      <el-table-column sortable prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column
        sortable
        prop="totalPrice"
        label="订单价格"
        :formatter="rounding"
      >
      </el-table-column>
      <el-table-column sortable prop="userName" label="店员"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status === 0"> 未提交 </template>
          <template v-else-if="scope.row.status === 1"> 已支付 </template>
          <template v-else-if="scope.row.status === 2"> 已取消</template>
        </template>
      </el-table-column>
      <el-table-column prop="shopCarList" label="购物清单">
        <template slot-scope="scope">
          <el-popover placement="right" width="400" trigger="click">
            <el-table :data="scope.row.shopCarList">
              <el-table-column
                width="150"
                property="productName"
                label="商品名"
              ></el-table-column>
              <el-table-column
                width="150"
                property="num"
                label="数量"
              ></el-table-column>
              <el-table-column
                width="150"
                property="price"
                label="单价"
                :formatter="rounding"
              ></el-table-column>
            </el-table>
            <el-button slot="reference">查看</el-button>
          </el-popover>
        </template>
      </el-table-column>

<!--      <el-table-column label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="success" @click="handleEdit(scope.row)"-->
<!--            >结算订单</el-button-->
<!--          >-->
<!--          <el-button type="danger" @click="handleDelete(scope.row)"-->
<!--            >取消订单</el-button-->
<!--          >-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json
import http from "../utils/request";

//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      selectUser: "",
      User: [],
      orders: [],
      page: 1,
      limit: 20,
      key: "",
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getUserList() {
      http.get(`/user/list/all`).then(({ data }) => {
        if (data.code == 1) {
          this.User = data.data;
        }
      });
    },
    rounding(row, column) {
      return parseFloat(row[column.property]).toFixed(2);
    },
    clear() {
      http.put(`/order/clear`).then(({ data }) => {
        console.log("清理数据", data);
        this.$message({
          type: "info",
          message: "清理数据",
        });
        this.getList();
      });
    },
    getList() {
      http
        .get(
          `/order/list?page=${this.page}&limit=${this.limit}&key=${this.selectUser}`
        )
        .then(({ data }) => {
          console.info("接收到传入数据", data.data);
          this.orders = data.data.records;
          console.info("接收到解析数据", this.order);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getList();
    this.getUserList();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共 css 类
</style>
